import React from 'react';
import { Form, DatePicker, Select, Button, Table } from 'antd';
import moment from 'moment';
import { fetchAtlasStatistics, fetchAtlasNodeStatistics, doExportAtlasStatistics, doExportAtlasNodeStatistics } from '@/services/datastatistics';
import UserSession from '@/UserSession';
import { formatMessage } from 'umi-plugin-react/locale';

class GraphStatistics extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryData: {
        fromDate: '',
        toDate: '',
        trigger: 0,
        applicationId: '0'
      },
      loading: true,
      list: [],
    }
  }

  componentWillMount() {
    let { queryData } = this.state;
    const fromDate = moment().subtract('7', 'days').format('YYYY-MM-DD');
    const toDate = moment().format('YYYY-MM-DD');
    queryData.fromDate = fromDate;
    queryData.toDate = toDate;
    this.setState({ queryData })
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  /**
   * 获取列表数据
   */
  getList = async () => {
    const { statisticsType } = this.props;
    switch (statisticsType) {
      case 'atlas':
        this.getAtlasStatistics();
        break;
      case 'atlasNode':
        this.getAtlasNodeStatistics()
        break;
    }
  }

  /**
   * 获取知识导图统计
   */
  getAtlasStatistics = () => {
    const { queryData } = this.state;
    this.setState({ loading: true }, async () => {
      const currentUser = UserSession.getCurrentUser()
      if(currentUser.applicationId){
        queryData.applicationId = currentUser.applicationId
      }
      const res = await fetchAtlasStatistics(queryData);
      this.setState({ list: res, loading: false })
    })
  }

  /**
   * 获取知识导图节点统计
   */
  getAtlasNodeStatistics = () => {
    const { queryData } = this.state;
    this.setState({ loading: true }, async () => {
      const res = await fetchAtlasNodeStatistics(queryData);
      this.setState({ list: res, loading: false })
    })
  }

  /**
   * 查询条件
   */
  queryByConditions = () => {
    const { form } = this.props;
    const { queryData } = this.state;
    const info = form.getFieldsValue();
    queryData.current = 1;
    queryData.fromDate = info.time[0].format('YYYY-MM-DD');
    queryData.toDate = info.time[1].format('YYYY-MM-DD');
    queryData.trigger = info.trigger;
    queryData.applicationId = info.robotId;
    this.setState({ queryData }, () => {
      this.getList();
    })
  }

  /**
   * 导出
   * @returns {*}
   */
  exportCategoryRecords = async () => {
    const { queryData } = this.state;
    const { statisticsType } = this.props;
    switch (statisticsType) {
      case 'atlas':
        await doExportAtlasStatistics(queryData);
        break;
      case 'atlasNode':
        await doExportAtlasNodeStatistics(queryData);
        break;
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { robotList, columns } = this.props;
    const { list, loading } = this.state;
    const currentUser = UserSession.getCurrentUser()

    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', marginBottom: 20 }}>
          <Form layout={'inline'}>
            {
              currentUser.applicationId ? null : (
                  <Form.Item>
                    {
                      getFieldDecorator('robotId', {
                        initialValue: '0'
                      })(
                          <Select style={{ width: 200 }} placeholder={formatMessage({ id: 'graphStatistics.select.placeholder.application' })} onChange={this.changeRobot}>
                            <Select.Option value={'0'}>{formatMessage({ id: 'graphStatistics.select.option.allApplications' })}</Select.Option>
                            {
                              robotList.map(item => {
                                return <Select.Option value={item.id} key={item.applicationId}>{item.name}</Select.Option>
                              })
                            }
                          </Select>
                      )
                    }
                  </Form.Item>
              )
            }
            <Form.Item style={{ textAlign: 'center' }}>
              {
                getFieldDecorator('time', {
                  initialValue: [moment().subtract('7', 'days'), moment()]
                })(
                  <DatePicker.RangePicker allowClear={false} style={{ width: '250px' }} />
                )
              }
            </Form.Item>
            <Form.Item>
              {
                getFieldDecorator('trigger', { initialValue: 0 })(
                  <Select style={{ width: 200 }} placeholder={formatMessage({ id: 'graphStatistics.select.placeholder.trigger' })}>
                    <Select.Option value={0}>{formatMessage({ id: 'graphStatistics.select.option.allTriggers' })}</Select.Option>
                    <Select.Option value={1}>{formatMessage({ id: 'graphStatistics.select.option.clickTrigger' })}</Select.Option>
                    <Select.Option value={2}>{formatMessage({ id: 'graphStatistics.select.option.inputTrigger' })}</Select.Option>
                  </Select>
                )
              }
            </Form.Item>
            <Form.Item>
              <Button type={'primary'} onClick={this.queryByConditions}>{formatMessage({ id: 'graphStatistics.button.query' })}</Button>
            </Form.Item>
          </Form>
          <Button onClick={this.exportCategoryRecords}>{formatMessage({ id: 'graphStatistics.button.export' })}</Button>
        </div>
        <Table
          dataSource={list}
          columns={columns}
          loading={loading}
          pagination={false}
          rowKey={'id'}
          scroll={{x:"auto",y:"50vh"}}
        />
      </div>
    );
  }
}

export default Form.create()(GraphStatistics);
